<template>
<div class="goods-hot">
    <h3>{{title}}</h3>
    <div v-if="goodsList">
        <GoodsItem v-for="item in goodsList" :key="item.id" :goods="item" />
    </div>
</div>
</template>

  
<script>
import { computed ,ref} from 'vue'
import GoodsItem from '../../category/components/goods-item'
import { useRoute } from 'vue-router'
import {findHotGoods}from '@/api/product'
export default {
    name: 'GoodsHot',
    components: {
        GoodsItem
    },
    props:{
       type:{
        type:Number,
       default:1 
       }
    },
    setup(props) {
        // 数据字典  标题
        const types={1:'24小时热榜',2:'周热榜',3:'总热榜'}
        const title=computed(()=>{
            return types[props.type]
        })
        // 获取数据
        const route=useRoute()
        const goodsList =ref([])
        findHotGoods({id:route.params.id,type:props.type}).then(data=>{
            goodsList.value=data.result
        })
        return {title,goodsList}
    }
}
</script>
  
<style lang="less" scoped>
.goods-hot {
    h3 {
        height: 70px;
        background: @helpColor;
        color: #fff;
        font-size: 18px;
        line-height: 70px;
        padding-left: 25px;
        margin-bottom: 10px;
        font-weight: normal;
    }

    ::v-deep .goods-item {
        background: #fff;
        width: 100%;
        margin-bottom: 10px;

        img {
            width: 200px;
            height: 200px;
        }

        p {
            margin: 0 10px;
        }

        &:hover {
            transform: none;
            box-shadow: none;
        }
    }
}
</style>
